<html>
<head>
    	<title>Cost Allocation</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="shortcut icon" href="${createLinkTo(dir:'images',file:'favicon.ico')}" type="image/x-icon" />	
	<style type="text/css">
		<!--
		@import '${createLinkTo(dir:'css',  file:'main.css')}';
		@import '${createLinkTo(dir:'js/dijit/themes/tundra',  file:'tundra.css')}';
		@import '${createLinkTo(dir:'js/dojox/grid/resources',  file:'Grid.css')}';
		@import '${createLinkTo(dir:'js/dojox/grid/resources',  file:'tundraGrid.css')}';
		-->
		@import 'http://o.aolcdn.com/dojo/1.2/dojo/resources/dojo.css';
		@import 'http://o.aolcdn.com/dojo/1.2/dijit/themes/tundra/tundra.css';
		@import 'http://o.aolcdn.com/dojo/1.2/dojox/grid/resources/Grid.css';
		@import 'http://o.aolcdn.com/dojo/1.2/dojox/grid/resources/tundraGrid.css';
	</style>
	<!--
	<script type="text/javascript" 
			src="${createLinkTo(dir:'js/dojo',  file:'dojo.js')}" 
			djConfig="parseOnLoad:true">
	-->
	<script
			djConfig="parseOnLoad:true",
			type="text/javascript"
			src="http://o.aolcdn.com/dojo/1.2/dojo/dojo.xd.js">
			</script>
	</script>
	<script type="text/javascript">
		dojo.require('dojo.data.ItemFileReadStore');
		
		dojo.require('dijit.Toolbar');
		dojo.require('dijit.form.Button');
		dojo.require('dijit.layout.BorderContainer');
		dojo.require('dijit.layout.ContentPane');

		dojo.require('dojox.grid.DataGrid');
		dojo.addOnLoad(function() {
			dojo.connect(	gridLedger, 
							'onSelected', 
							gridLedger, 
							function(rowIndex) {
								var sel = this.selection.getFirstSelected(); 
								dojo.publish('gridLedger.selected', [rowIndex, sel])
							}
			);
			dojo.connect(	gridVersion, 
							'onSelected', 
							gridVersion, 
							function(rowIndex) {
								var sel = this.selection.getFirstSelected(); 
								dojo.publish('gridVersion.selected', [rowIndex, sel])
							}
			);
			dojo.subscribe(	'gridLedger.selected', 
							function(rowIndex, item) {
								gridVersion.selection.deselectAll();
								gridVersion.setQuery({code: '' + item.code});
								gridFactor.setQuery({code: ''});								
							}
			);
			dojo.subscribe(	'gridVersion.selected', 
							function(rowIndex, item) {
								gridFactor.selection.deselectAll();
								gridFactor.setQuery({code: '' + item.code});
							}
			);
		});
	</script>
</head>
<body class="tundra">
	<div jsId="storeLedger" dojoType="dojo.data.ItemFileReadStore" url="${createLinkTo(dir:'js/test',  file:'ledger.json')}"></div>
	<div jsId="storeVersion" dojoType="dojo.data.ItemFileReadStore" url="${createLinkTo(dir:'js/test',  file:'ledger.json')}"></div>
	<div jsId="storeFactor" dojoType="dojo.data.ItemFileReadStore" url="${createLinkTo(dir:'js/test',  file:'ledger.json')}"></div>
    <div id="main" dojoType="dijit.layout.BorderContainer" style="100%; height: 100%">
		<div dojoType="dijit.layout.BorderContainer" region="left" style="width: 250px; margin: 3px" splitter="true">
			<div dojoType="dijit.Toolbar" region="top">
				<button dojoType="dijit.form.Button" iconClass="toolbutAdd">Refresh</button>
				<button dojoType="dijit.form.Button" iconClass="toolbutDelete">Delete</button>
			</div>
			<table id="gridLedger" jsId="gridLedger" dojoType="dojox.grid.DataGrid"
		        query="{ code: '*' }" store="storeLedger" rowsPerPage="20" region="center">
		        <thead>
		            <tr>
		                <th field="code" formatter="formatType" width="auto">Code</th>
		                <th field="description" width="auto">Description</th>
		            </tr>
		        </thead>
		    </table>
		</div>
		<div dojoType="dijit.layout.BorderContainer" region="center">
			<div dojoType="dijit.layout.BorderContainer" region="top" style="height: 250px;" splitter="true">
				<div dojoType="dijit.Toolbar" region="top">
					<button dojoType="dijit.form.Button" iconClass="toolbutAdd">Refresh</button>
					<button dojoType="dijit.form.Button" iconClass="toolbutDelete">Delete</button>
				</div>
				<table jsId="gridVersion" dojoType="dojox.grid.DataGrid"
			        query="{ code: '' }" store="storeVersion" rowsPerPage="20" region="center">
			        <thead>
			            <tr>
			                <th field="code" formatter="formatType" width="auto">Code</th>
			                <th field="description" width="auto">Description</th>
			                <th field="version" width="auto">Version</th>
			                <th field="active" width="auto">Active</th>
			            </tr>
			        </thead>
			    </table>
			</div>
			<div dojoType="dijit.layout.BorderContainer" region="center">
				<div dojoType="dijit.Toolbar" region="top">
						<button dojoType="dijit.form.Button" iconClass="toolbutAdd">Refresh</button>
						<button dojoType="dijit.form.Button" iconClass="toolbutDelete">Delete</button>
				</div>
				<table jsId="gridFactor" dojoType="dojox.grid.DataGrid"
			        query="{ code: '' }" store="storeFactor" rowsPerPage="20" region="center">
			        <thead>
			            <tr>
			                <th field="code" formatter="formatType" width="auto">Code</th>
			                <th field="description" width="auto">Description</th>
			                <th field="factor" width="auto">Factor</th>
			            </tr>
			        </thead>
			    </table>
			</div>
		</div>
    </div>	
</body>	
</html>